<template>
  <div id="leftTop">
    <div id="leftTopChart" style="height: 4rem"></div>
  </div>
</template>

<script>
import Highcharts from 'highcharts'
export default {
  name: "leftTopChart",

  mounted() {
    this.getdata();
  },
  data() {
    return {
      charts: "",
      opinionData: [],
      ratio:1,
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(document.getElementById("rightMid2Chart"));
      var each = Highcharts.each,
        round = Math.round,
        cos = Math.cos,
        sin = Math.sin,
        deg2rad = Math.deg2rad;
      let test = this.opinionData
      let num = []
      let data = []
      let name = []
      let count = 0
      let total = 0
      for(var key in test) {
        name.push(key);             //属性名（key）
        data.push(test[key][1]*100);       //属性值（value）
        num.push(test[key][0])
        if(test[key][0] !=0){
          count = count + 1
          total = total + test[key][0]
        }
        }
      for(var item2 in num){
        // console.log(item2)
        if(num[item2]/total > 0.8){
          if(num[item2]!=total){
            num[item2] = (1-num[item2]/total)*total*2
          }
        }
      }
      // for(var item in data){
      //   // console.log(item)
      //   // console.log(data)
      //   // console.log(data[item])
      //     if(data[item]==0){
      //       data[item]=null
      //   }
      // }
      // console.log(data)
      // 3D渲染
      Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        // Do not do this if the chart is not 3D
        if (!this.chart.is3d()) {
          return;
        }
        var series = this,
          chart = series.chart,
          options = chart.options,
          seriesOptions = series.options,
          depth = seriesOptions.depth || 0,
          options3d = options.chart.options3d,
          alpha = options3d.alpha,
          beta = options3d.beta,
          z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
        z += depth / 2;
        if (seriesOptions.grouping !== false) {
          z = 0;
        }
        each(series.data, function(point) {
          var shapeArgs = point.shapeArgs,angle;
          point.shapeType = 'arc3d';
          var ran = point.options.h;
          shapeArgs.z = z;
          shapeArgs.depth = depth * 0.75 + ran;
          shapeArgs.alpha = alpha;
          shapeArgs.beta = beta;
          shapeArgs.center = series.center;
          shapeArgs.ran = ran;
          angle = (shapeArgs.end + shapeArgs.start) / 2;
          point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
          };
        });
      });
      (function(H) {
        H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
          // Run original proceed method
          var ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      }(Highcharts));
      var option = {
        // 标题
        title:{
          text:"测试通过率",
          align:'left',
          floating:true,
          y:this.refontSize(10),
          x:this.refontSize(-5),
          style:{
            color:'#CCFFFF',
            fontSize:this.refontSize(18),
            fontWeight:"bold"
          }
        },

        chart: {
          type: 'pie',
          animation: false,
          backgroundColor:null,
          events: {
            load: function() {
              var each = Highcharts.each,
                points = this.series[0].points;
              each(points, function(p) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          },
          options3d: {
            enabled: true,
            alpha: 75,
            beta: 0
          }
        },
        credits: {
          enabled: false
        },
        // 图表设置
        plotOptions: {
          pie: {
            size:this.refontSize(175),
            innerSize: this.refontSize(75),
            enableMouseTracking: false,
            // allowPointSelect: true,
            // cursor: 'pointer',
            // center:'[0,0]',
            depth: this.refontSize(35),
            // colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
            //  '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],
            // colors:['#9370DB','#9fe6b8','#ffdb5c','#32c5e9'],
            colors:['#ffdb5c','#9370DB','#9fe6b8','#32c5e9'],
            dataLabels: {
              enabled: true,
              crop:false,
              distance: this.refontSize(10),
              overflow:'overflow',
              y:-this.refontSize(6),
              useHTML:true,
              style:{
                color:'#91e8e1',
                // fontWeight:'bold',
                fontSize:this.refontSize(14),
                // textOutline: "10px 10px contrast"
              },
              formatter:function(){
                // console.log(typeof(this.point.h));
                if(this.point.y !=0){
                return "<span style='font-size:0.18rem;'>"+this.point.name+'<br>'+"Pass："+(this.point.h*1920/window.screen.width).toFixed(0)+'%'+"</span>";
                }
              }
              }
          }
        },
        // 数据
        series: [{
          type: 'pie',
          name: '测试通过率',
          startAngle:120,
          data: [
          //     {
          //   name: name[3],
          //   y: this.refontSize(num[3]),
          //   h: this.refontSize(data[3])
          // },
            {
            name: name[0],
            y: this.refontSize(num[0]),
            h: this.refontSize(data[0])
          }, {
            name: name[1],
            y: this.refontSize(num[1]),
            h: this.refontSize(data[1])
          }, {
            name: name[2],
            y: this.refontSize(num[2]),
            h: this.refontSize(data[2])
          },
            {
              name: name[3],
              y: this.refontSize(num[3]),
              h: this.refontSize(data[3])
              // h: this.backfontSize(data[3])
            },
            ]
        }]
      };
      Highcharts.chart("leftTopChart",option);
    },
    // setratio(){
    //   let test = this.opinionData
    //   let num = []
    //   let data = []
    //   let name = []
    //   let count = 0
    //   let total = 0
    //   for(var key in test) {
    //     name.push(key);             //属性名（key）
    //     data.push(test[key][1]*100);       //属性值（value）
    //     num.push(test[key][0])
    //     }
    //   for(var item in num){
    //     if(num[item] !=0){
    //       count = count + 1
    //       total = total + num[item]
    //     }
    //   }
    //   for(var item2 in num){
    //     console.log(item2)
    //     if(num[item2]/total > 0.8){
    //       num[item2] = (1-num[item2]/total)*total*4
    //     }
    //   }
    //   console.log(num)
    // },
    // 请求测试数据
    getdata(){
        this.$http({ method: 'get',
                    url: 'show/testinfo/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
                    this.opinionData =response.data;
                    // 渲染
                    // this.setratio()
                    this.SetEchart()
                },
                );
    }
  }
}
</script>

<style lang="scss" scoped>
</style>